/<template>
  <div class="group">
    <div class="cont">
      <div v-for="(item, index) in list" :key="index" @click="detais(item.id)">
        <img :src="item.img" alt="" />
        <h1 class="h1">{{ item.title }}</h1>
        <div class="box1">
          <span>活动时间:{{ item.during }}</span>
          <span>已报名:{{ item.count }}人</span>
        </div>
        <div class="box2" v-if="item.status">正在拍卖</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    detais(ids) {
      uni.navigateTo({
        url: `/pages/detail/GroupDetail?id=${ids}`,
      });
    },
  },

  data() {
    return {
      list: [
        {
          id: 3,
          title: "逸品尚居",
          bid: "19",
          img: "https://images.sqfcw.com/attachment/build/20201217/cb98c7607c52b15320a32d2f309674e3939c91c1.png",
          discount: "网上预约购房送大桶食用油！",
          click_count: 8561,
          during: "2020.11.1-2021.10.30",
          status: "1",
          tel: "052784225199",
          is_free: 0,
          is_discount: 0,
          count: 256,
        },
        {
          id: 17,
          title: "恒大湖山半岛",
          bid: "215",
          img: "https://images.sqfcw.com/attachment/build/20210607/03e04600eac20bb0ba93930c8c0907dd25879a25.png",
          discount: "看房送好礼",
          click_count: 16,
          during: "",
          status: "1",
          tel: "",
          is_free: 0,
          is_discount: 0,
          count: 45,
        },
      ],
    };
  },
};
</script>
<style scoped lang="scss">
.group {
  width: 100%;
  height: 100%;
  .cont {
    width: 93%;
    margin: 0 auto;
    > div {
      width: 100%;
      height: 500rpx;
      border-bottom: 1rpx solid #ccc;
      margin-bottom: 20rpx;
      position: relative;
      img {
        width: 100%;
        height: 75%;
      }
      .h1 {
        font-size: 20px;
        font-weight: bold;
      }
      .box1 {
        margin-top: 10rpx;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: #ccc;
      }
      .box2 {
        width: 130rpx;
        text-align: center;
        line-height: 65rpx;
        border-radius: 30rpx;
        position: absolute;
        height: 65rpx;
        color: white;

        top: 8%;
        left: 7%;
        background: rgb(212, 125, 140);
      }
    }
  }
}
</style>